<template>
  <div class="pages">
    <span>页次:</span
    ><span>{{ tableObjs.currentPage }}/{{ tableObjs.totalPages }}</span
    ><span>页</span><span>每页显示：</span>
    <span>
      <select name="" id="" v-model="tableObjs.number" @change="alterNumber">
        <option
          v-for="(item, index) in tableObjs.tableData.length > 6
            ? tableObjs.tableData.slice(0, 6)
            : tableObjs.tableData"
          :key="index"
          :value="index + 1"
        >
          {{ index + 1 }}
        </option>
      </select>
    </span>
    <span>条</span>
    <span>总记录数：</span>
    <span>{{ tableObjs.tableData.length }}条</span>

    <span>
      <el-button @click="getFirst"><span>首页</span></el-button>
      <span>
        <el-pagination
          layout="prev, pager, next"
          :page-size="tableObjs.number"
          :current-page="tableObjs.currentPage"
          @current-change="handleCurrentChange"
          :total="tableObjs.tableData.length"
          style="display: inline-block"
        >
        </el-pagination>
      </span>
      <el-button @click="getLast"><span>末页</span></el-button>
    </span>
  </div>
</template>

<script>
import {
  changeNumber,
  currentChange,
  getFirstPage,
  getLastPage,
} from "../util/tools";
export default {
  name: "Pages",
  data() {
    return {};
  },
  props: ["tableObjs"],
  methods: {
    alterNumber() {
      changeNumber(this.tableObjs);
    },

    handleCurrentChange(val) {
      currentChange(val, this.tableObjs);
    },

    getFirst() {
      getFirstPage(this.tableObjs);
    },

    getLast() {
      getLastPage(this.tableObjs);
    },
  },
  mounted() {},
};
</script>

<style scoped lang='less'>
.pages {
  margin-top: 30px;
  span {
    margin: 0 15px;
  }
}
</style>